<template>
<div class="dashboard-container">
    <section data-v-36b83648="" data-v-745c4293="" class="app-main" style="min-height: 100%;">
    <div data-v-36b83648="" class="question-container">
      <el-card class="el-card is-always-shadow">

    <!-- 大页面-->
    <div class="el-card__body">

    <el-form :model="requestParameters" ref="requestParameters">
       <el-form-item label="关键字">
         <el-input
          v-model="requestParameters.keyword"
           placeholder="请输入内容"
          @keyup.enter="handleFilter"
          @change="inp"
           style="width: 200px;"
           class="filter-item"
           ></el-input>

              <el-button class="filter-item fr"  type="primary"  @click="handleFilter">搜索</el-button>
         <el-button class="filter-item fr as"  type="" @click="resetForm">清除</el-button>

       </el-form-item>
        </el-form>

     <el-alert
    type="info"
    show-icon
    :title="'共'+total+'条记录'"
    :closable="false">

  </el-alert>

    <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">

    <div >
      <el-table
      :data="randomsList"
      class="el-table__header"
      style="width: 1278px;"
      >
      <el-table-column prop="id" label="编号" width="220" />

      <el-table-column prop="questionType" label="题型" width="80" >
         <template slot-scope="scope">
        <span v-if="scope.row.questionType==1">单选</span>
        <span v-if="scope.row.questionType==2">多选</span>
        <span v-if="scope.row.questionType==3">简答</span>
           </template>
      </el-table-column>

      <el-table-column prop="questionIDs" label="题目编号"  width="220">
        <template slot-scope="scope">
          <el-link
           type="primary"
           :underline="false"
           v-for="(items,index) in scope.row.questionIDs"
           :key="index"
           @click="put(scope.row,index)"
           >
           {{items.number}}
           </el-link>
        </template>

           <!-- <el-link v-for="item in "></el-link> -->

      </el-table-column>
      <el-table-column prop="addTime" label="录入时间" width="180" />
      <el-table-column prop="totalSeconds" label="答题时间" width="166" />
      <el-table-column prop="accuracyRate" label="正确率" width="166" />
      <el-table-column prop="userName" label="录入人" width="166" />
      <el-table-column  label="操作" width="80">
        <template slot-scope="scope">
       <el-button type="danger" plain icon="el-icon-delete" @click="delRandoms(scope.row.id)" circle></el-button>
       </template>
      </el-table-column>
      </el-table>
      </div>
        <!-- 分页区域 -->

           <!-- 分页区域 -->
            <el-pagination
                background
                :page-sizes="[10, 15, 20, 25]"
                :current-page="requestParameters.page"
                :page-size="requestParameters.pagesize"
                 layout=" prev, pager, next,sizes, jumper"
                 :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
                >
      </el-pagination>

          <!--  -->
      </div>
      </div>
      </el-card>
      <!-- 弹窗组件 -->
      <el-dialog
      v-if="dialogVisible"
      title="题目预览"
       :visible.sync="dialogVisible"
      >
        <preview :link='link' />
       <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
  </div>
      </el-dialog>
    </div>
    </section>
  </div>
</template>

<script>

import { randoms, removeRandoms } from '@/api/hmmm/questions'
import preview from './companys/Preview/index.vue'
// import baseApiEnum from '@/api/base/baseApi'
export default {
  name: 'dashboard-container',
  data () {
    return {
      dellos: false, // 当前是没有关键字
      keyword: '',
      randomsList: [],
      total: 0, // 数据总条数
      dialogVisible: false,
      requestParameters: {
        page: 1, // 当前页面
        pagesize: 10 // 页面显示的条数
      },
      link: {}

    }
  },
  components: {
    preview
  },
  created () {
    this.randoms()
  },
  methods: {
    inp () {
      this.keyword = ''
      this.randoms()
    },

    // 点击打开弹窗
    put (row, index) {
      this.link.index = index
      this.link.row = row
      this.dialogVisible = true
    },

    // 搜索
    handleFilter () {
      this.dellos = true// 当前有关键字
      this.requestParameters.page = 1
      this.randoms(this.requestParameters.keyword)
    },

    // 置空
    resetForm () {
      this.requestParameters.keyword = ''
      this.dellos = false// 当前没有关键字
      this.randoms()
    },

    // 获取数据列表
    async randoms () {
      const res = await randoms(this.requestParameters)

      this.randomsList = res.data.items
      this.total = res.data.counts
      res.data.questionIDs = res.data.items.map(item => item.questionIDs)
    },

    // 获取数据列表 没有关键字
    async randomss () {
      const res = await randoms({
        page: this.requestParameters.page, // 当前页面
        pagesize: this.requestParameters.pagesize // 页面显示的条数
      })
      this.randomsList = res.data.items
      this.total = res.data.counts
      res.data.questionIDs = res.data.items.map(item => item.questionIDs)
    },
    // 单独封装一个方法
    doDel (id) {
      const res = removeRandoms(id)
      if (this.randomsList.length === 1) {
        this.requestParameters.page--
        if (this.requestParameters.page <= 0) {
          this.requestParameters.page = 1
        }
      }
      // 1. 刷新页面
      this.randoms()
      // 2. 提示
      this.$message.success('删除成功')
    },
    delRandoms (id) {
      this.$confirm('此操作将永久删除员工, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDel(id)
      }).catch(() => {})
    },

    // 每页显示的条数发生改变时触发
    handleSizeChange (newPageSize) {
      if (this.dellos === false) {
        this.requestParameters.pagesize = newPageSize
        // this.randomss()
      } else {
        this.requestParameters.pagesize = newPageSize
        this.randoms()
      }
    },

    // 当前页面发生改变时触发
    handleCurrentChange (newPage) {
      if (this.dellos === false) {
        this.requestParameters.page = newPage
        this.randoms()
      } else {
        this.requestParameters.page = newPage
        this.randoms()
      }
    }

  }
}
</script>

<style scoped>
.el-pagination{
    margin-top: 20px;
    text-align: right;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
}
.fr {
  margin-left: 10px;
}
.as {
  margin-left: 10px;
}
.dialog-footer{
text-align: right;
}

</style>
